<div class="p-12 flex">
    <div class="w-3/5 mx-auto sm:px-6 lg:px-8 flex flex-col gap-10">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <div class="p-4 lg:p-8 bg-white border-b border-gray-200">
                <h1 class="text-2xl font-medium text-gray-900">
                    借阅规则
                </h1>
                <x-section-border />
                <div class="text-gray-400 leading-relaxed">
                    <p class="mt-6">借书资格： 借阅服务开放给注册用户，借阅前需要联系管理员激活账户。</p>
                    <p class="mt-6">借阅权限： 已激活的用或开通权益用户。</p>
                    <p class="mt-6">续借： 在借阅期内，您最多可续借一次。</p>
                </div>
            </div>
        </div>
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg" x-data="{
            init(){
                new Swiper('.online-section', {
                    slidesPerView: 4,
                    spaceBetween: 20,
                    navigation: {
                            nextEl: '#online-next',
                            prevEl: '#online-prev'
                    },
                    // If we need pagination
                    pagination: {
                        el: '.online-pagination',
                        clickable: true
                    },
                    preventClicks: false,
                    on:{
                        click:function (e) {
                         Livewire.navigate(e.clickedSlide.href)
                        }
                    }
                })
            }
        }">
            <div class="p-6 lg:p-8 bg-white border-b border-gray-200">
                <h1 class="text-2xl font-medium text-gray-900">
                    书籍上新
                </h1>
                <x-section-border />
                <div class="swiper online-section w-full">
                    <div class="flex gap-3 h-full swiper-wrapper">
                        @foreach($books as  $book)
                            <a href="{{route('book',['book'=>$book->id])}}" class="swiper-slide block text-center h-full">
                                <div class="flex flex-col gap-2 justify-between items-center cursor-pointer p-4" wire:key="{{$book['id']}}">
                                    <div class="flex h-[300px] overflow-hidden">
                                        <img class="h-full w-full" wire:ignore src="{{Storage::url($book->img)}}">
                                    </div>
                                    <p class="text-xl mt-1 text-gray-700">{{$book->title}}</p>
                                    <div class="flex gap-2">
                                        @foreach($book->tag as $key => $tag)
                                            <span class="bg-violet-300 text-white rounded px-2 py-1 text-sm" wire:key="t_{{$key}}">
                                        {{$tag}}
                                    </span>
                                        @endforeach
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="w-[250px] h-[50px] mx-auto relative mt-6 flex justify-center items-center">

                    <div class="swiper-pagination online-pagination w-full h-full"></div>
                    <div class="w-10 h-10 swiper-button-next cursor-pointer" id="online-next"></div>
                    <div class="w-10 h-10 swiper-button-prev cursor-pointer"  id="online-prev"></div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .swiper-pagination{
            line-height: 44px !important;
        }
        .swiper-pagination-bullet{
            background: #000000 !important;
        }
        .swiper-button-prev, .swiper-button-next{
            width: 24px !important;
            height: 24px !important;
            background: #666360;
            color: #FFFFFF;
            border-radius: 5px;
        }
        .swiper-button-prev::after, .swiper-button-next::after{
            font-size: 14px;
            color: #FFFFFF;
        }
    </style>
</div>
@assets
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
@endassets
